<template>
    <div>
        <p>我是祖先组件<button @click="ciqi = '青花瓷'">修改遗产</button></p>
        <Son></Son>
    </div>
</template>

<script>
import Son from './Son.vue'
import { computed } from 'vue'
export default {
    data() {
        return {
            ciqi: '元青花'
        }
    },
    components: {
        Son
    },
    // 第一种方式: 提供的数据是固定值
    // provide: {
    //     msg: '我啥也没给留,靠自己吧'
    // }
    //第二种方式: 提供的数据为data 中的响应式数据
    // 特点: 修改后的msg 没有实现响应式,后代的数据没有改
    // provide() {
    //     return {
    //         msg: this.ciqi
    //     }
    // }
    // 第三种方式: 实现传递的数据的响应式修改
    provide() {
        // console.log(this.ciqi);
        // console.log('computed', computed(() => this.ciqi));
        return {
            msg: computed(() => this.ciqi)
        }
    }
}
</script>
<style scoped></style>